<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>KISSY Decorated Simple Tree</title>
<link href="../assets/tree.css" rel="stylesheet"/>
<style>
    .goog-tree-children {
        padding-left: 19px;
    }

    .goog-tree-lchildren {
        padding-left: 19px;
    }

    .goog-tree-item-selected .goog-tree-item-label {
        background: buttonface;
        color: buttontext;
    }

    .goog-tree-item-focused {
        outline: none;
    }

    .goog-tree-item-focused .goog-tree-item-selected .goog-tree-item-label {
        background: highlight;
        color: highlighttext;
    }


</style>
</head>
<body>


<h1>KISSY Decorated Simple Tree</h1>

<h2>demo</h2>

<a href="javascript:void(0)" id="expandAll">展开全部</a>&nbsp;
<a href="javascript:void(0)" id="collapseAll">关闭全部</a>
<div id="treeContainer" style="width: 200px;">

    <div id='root' class="goog-tree-root">
        <span class="goog-tree-item-label">淘宝网</span>
        <div class="goog-tree-children">
            <div class="goog-tree-item">
                <span class="goog-tree-item-label">收藏夹</span>
                <div class="goog-tree-children">
                    <div class="goog-tree-item">
                        <span class="goog-tree-item-label">收藏的宝贝</span>
                    </div>
                    <!-- 标记为强制 folder 样式 -->
                    <div class="goog-tree-item goog-tree-item-folder">
                        <span class="goog-tree-item-label">收藏的店铺</span>
                    </div>
                </div>
            </div>
            <div class="goog-tree-item">
                <span class="goog-tree-item-label">我要买</span>
            </div>
        </div>
    </div>

</div>

<hr/>


<script src="../../../build/kissy.js"></script>
<script>
    KISSY.Config.base = "../../";
    KISSY.use("tree", function(S, Tree) {
        var $ = S.all;

        var tree = new Tree({
            content:"淘宝网",
            prefixCls:"goog-",
            expanded:true,
            // showRootNode:false,
            srcNode:"#root"
        });

        tree.render();

        tree.on("click", function(e) {
            S.log("action : " + e.target.get("content"));
        });

        $("#expandAll").on("click", function() {
            tree.expandAll();
        });

        $("#collapseAll").on("click", function() {
            tree.collapseAll();
        });
    });
</script>
</body>
</html>